<template>
  <div class="questionPreview">
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="900px"
      @close="handleClose"
    >

      <el-row>
        <el-col :span="6">【题型】：{{ previewData. questionType|sfktFormate }} </el-col>
        <el-col :span="6">【编号】：{{ previewData. id }} </el-col>
        <el-col :span="6">【难度】：{{ previewData. difficulty|difFormate }} </el-col>
        <el-col :span="6">【标签】：{{ previewData. tags }} </el-col>
        <el-col :span="6">【学科】：{{ previewData. subject }} </el-col>
        <!-- <el-col :span="6">【学科】：暂时不详 </el-col> -->
        <el-col :span="6">【目录】：{{ previewData. catalog }} </el-col>
        <el-col :span="6">【方向】：{{ previewData. direction }} </el-col>

      </el-row>
      <hr>
      <!-- <el-row >
  <el-col :span="24">【题干】： </el-col>
  <el-col :span="24"> <span v-html="previewData. question"></span> </el-col>

</el-row> -->
      <div>【题干】： </div>
      <div style="color:blue;" v-html="previewData. question" />

      <!-- 需要比较出单选按钮和多选按钮的值 -->
      <!-- 如果isright为1，说明是正确答案 -->
      <div v-if="previewData. questionType!=='3'">
        <!-- <el-col  :span="24"> </el-col> -->
        <div>{{ previewData. questionType|sfktFormate }}选项：(以下选中的选项为正确答案)  </div>
        <div v-for="item in radioData.options" :key="item.code" class="radiogroup" style="padding:8px 0">

          <el-radio v-if="previewData. questionType==='1'" :label="1" :value="item.isRight">{{ item.title }}</el-radio>
          <el-checkbox v-if="previewData. questionType==='2'" :value="item.isRight?true:false">{{ item.title }}</el-checkbox>
        </div>

      </div>
      <div v-else />

      <hr>
      <el-row>
        <el-col :span="24">【参考答案】：
          <el-button type="danger" size="small" @click="showVideo">视频答案预览</el-button>
          <div v-if="ishow" class="video">
            <video ref="videoref" :src="radioData.videoURL" controls />
          </div>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="24">【答案解析】：<span v-html="previewData.answer" />  </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="24">【题目备注】：{{ previewData.remarks }} </el-col>

      </el-row>

      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="Close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '../../api/hmmm/constants'
import { detail } from '../../api/hmmm/questions'
export default {
  name: 'QuestionPreview',
  // 过滤器跟在谁的后面，修改的就是谁的值
  filters: {
    // 将1和2和3渲染成，单选、多选、和简答
    // sfktFormate (row) {
    //   console.log(row)
    //   console.log(questionType)
    //   console.log(questionType.find((item) => { return item.value === +row }))
    //   // 先遍历数组 每个都去找到和当前组匹配的，然后将其转换成对应的字符，然后将其return出去
    //   return questionType.find((item) => { return item.value === +row }).label
    // },
    // // 将1和2和3渲染成，简单、一般、和困难
    // difFormate (row) {
    //   return difficulty.find((item) => { return item.value === +row }).label
    // }

    sfktFormate(value) {
      if (value) return questionType.find(item => item.value === +value).label
    },
    difFormate(value) {
      if (value) return difficulty.find(item => item.value === +value).label + '题'
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    previewData: {
      type: [Object, Array],
      required: true
    }
  },

  data() {
    return {
      // radio可以收集到现在点击的那个值
      radio: 0,
      checkList: [],
      radioData: {},
      ishow: false

    }
  },
  methods: {
    // 点击叉叉关闭事件和点击关闭关闭事件
    handleClose() {
      this.$emit('update:dialogVisible', false)
      if (this.radioData.videoURL) {
        this.$refs.videoref.pause()
      }
      this.ishow = false
    },

    // 拿着当前的id去获取值
    async open() {
      const { data } = await detail({ id: this.previewData.id })
      this.radioData = data
    },
    showVideo() {
      this.ishow = !this.ishow
      if (this.radioData.videoURL) {
        this.$refs.videoref.play()
      }
    },
    Close() {
      this.handleClose()
    }

    // 点击取消事件
  }

}
</script>

<style scoped lang='scss'>
.questionPreview{
  .el-col{
    padding:10px 0px

  }

}
// .radiogroup{
// .el-radio{
//   display: block;
//   padding: 5px 0px;
// }
// }
// .checkboxgroup{
//   .el-checkbox{
//      display: block;
//   padding: 5px 0px;
//   }
// }
.video{
  width: 400px;
  height: 300px;
     video{
       width: 100%;
       height: 100%;

     }

}

</style>
